<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app" >
<!--  1.stop修饰符的使用-->
  <div @click="dtnClick">
<!-- 停止冒泡。冒泡：就是指当点击按钮的时候，父级的dtnClick也被打印出来。(不希望此事情发生)  -->
    <button @click.stop="btnClick">按钮</button>
  </div>
<br>
<!--  2.prevent修饰符的使用-->
  <form action="baidu">
<!--  阻止默认行为，在这里就是组织提交的跳转 -->
    <input type="submit" value="提交" @click.prevent="submitClick"/>
  </form>

<!--  3.键盘的点击：监听某个键盘的键的点击-->
  <input type="text" @keyup="keyUp">
<!--  只监听回车的事件-->
  <input type="text" @keyup.enter="keyUp">

<!--  4..once修饰符的使用
      点击回调只会触发一次-->
  <button @click.once="click">按钮2</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const vm=new Vue({
    el:'#app',
    data:{
      message:''
    },
    methods:{
      dtnClick(){
        console.log('dtnClick');
      },
      btnClick(){
        console.log('btnClick');
      },
      submitClick(){
        //出现打印  不过是一闪而过
        console.log('submitClick');
      },
      keyUp(){
        console.log('keyUp');
      },
      click(){
        console.log('click');
      }
    }
  })
</script>

</body>
</html>